<template>
  <el-col :span="formItem.span" v-if="formItem.type !== 'space' || formItem.type !== 'btns'">
    <el-form-item v-for="itemChild in formItem" :label="itemChild.label" :label-width="itemChild.labelWidth">
      <el-select
        v-if="itemChild.type === 'select'"
        v-bind:itemChild.dataKey="itemChild.dataValue"
        @change="$emit('change', $event.target[itemChild.dataKey])"
        :placeholder="itemChild.placeHolder"
        :style="{ width: itemChild.width }"
        :size="itemChild.size"
      >
        <el-option v-for="item in itemChild.options" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>
      <el-date-picker
        v-else-if="itemChild.type === 'datePicker'"
        v-bind:itemChild.dataKey="itemChild.dataValue"
        @change="$emit('change', $event.target[itemChild.dataKey])"
        :type="itemChild.dateType"
        :value-format="itemChild.valueFormat"
        :clearable="itemChild.clearAble"
        :editable="itemChild.editAble"
        :placeholder="itemChild.placeHolder"
        :size="itemChild.size"
      ></el-date-picker>
      <el-input
        v-else-if="itemChild.type === 'input'"
        v-bind:itemChild.dataKey="itemChild.dataValue"
        @change="$emit('change', $event.target[itemChild.dataKey])"
      ></el-input>
      <slot v-else-if="itemChild.type === 'special'"></slot>
    </el-form-item>
  </el-col>
  <el-col v-else-if="itemChild.type === 'btns'" :span="itemChild.span">
    <slot name="btns"></slot>
  </el-col>
  <el-col v-else :span="itemChild.span"></el-col>
</template>

<script>
  export default {
    name: 'form-item',
    components: {},
    mixins: [],
    model: {
      prop: 'formItem',
      event: 'change'
    },
    props: {
      formItem: {
        type: Array,
        default: function () {
          return {
            span: '8',
            type: 'input',
            label: '地市',
            labelWidth: '30px',
            dataKey: '',
            dataValue: '',
            placeHolder: '123',
            width: '100px',
            size: 'mini',
            options: [{ id: 1, name: '1' }],
            dateType: 'month',
            valueFormat: 'yyyyMM',
            clearAble: true,
            editAble: false
          }
        }
      }
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    filter: {},
    created() {},
    mounted() {},
    activated() {},
    updated() {},
    methods: {}
  }
</script>

<style lang="less" scoped></style>
